<template>
  <div class="anchor-main">
    <el-table :data="tableData" style="width: 100%" border class="anchor-table">
      <el-table-column property="goods" label="物品信息" align="center">
        <template #default="scope">
          <el-button type="text" @click="dialogVisible = true;goodsList = scope.row.goods">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column property="orderNum" label="数量" align="center"/>
      <el-table-column property="orderPrice" label="价格" align="center"/>
      <el-table-column property="orderTime" label="下单时间" align="center"/>
    </el-table>
    <el-dialog title="物品信息" v-model="dialogVisible" width="360">
      <div v-for="item in goodsList" class="goods-div">
        <p class="small-tip">{{ item.goodsName }}</p>
        <p class="small-tip">卡密：{{ item.goodsCode }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import store from "@/store";
import router from "@/router"
import api from '../api/index'
import {ElMessage, ElMessageBox} from "element-plus"
import {ref, onMounted, reactive} from "vue"

onMounted(() => {
  fetchOrderList()
})
const dialogVisible = ref(false)
const goodsList = ref([])
let tableData = ref([])
let totalNum = ref(0)
const fetchOrderList = async () => {
  try {
    const userName = store.state.userInfos.userId
    const response = await api.getOrderList(userName)
    if (response) {
      if (response.status === 401 || response.code === 1) {
        ElMessage.error('内容为空')
      } else {
        tableData.value = response.list
        totalNum.value = response.count
      }
    }
  } catch (error) {
    console.error(error)
  }
}

</script>

<style scoped lang="less">
.goods-div{
  padding: 2px;
  border: 1px solid #b3b3b3;
}
/deep/ .el-table .el-table__cell {
  position: initial;
}

.anchor-main {
  padding: 1% 0;

  .anchor-table {
    margin: 20px 0;
    border-top: 1px solid #4ea0ef;
    padding-top: 20px;

    .small-tip {
      line-height: 1.3;
      margin: 0;
    }
  }
}

@media screen and (max-width: 720px) {
  /deep/ .el-table__body-wrapper .cell {
    font-size: 12px;
    line-height: 1;
  }

}
</style>